<template>
	<div class="htao-bar">
		<div class="bar-item">
			<span @click="createCodeArea" class="item-detail">
				<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="64 64 896 896" width="20" height="20"><path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 0 0 308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 0 0-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" :fill="ctrlVType == 'ideaCode' ? 'blue' : 'black'"></path></svg>
			</span>
		</div>
		<div class="bar-item">
			<span @click="updateContentStyle('content')">
				正文
			</span>
			<span @click="updateContentStyle('title1')"  class="item-detail">
				标题1
				<!-- <svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path :fill="contentType == 'title1' ? 'blue' : 'black'" d="M6 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M25 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 24H25" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M34.2261 24L39.0001 19.0166V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg> -->
			</span>
			<span @click="updateContentStyle('title2')"  class="item-detail">
				标题2
				<!-- <svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path :fill="contentType == 'title2' ? 'blue' : 'black'" d="M6 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 24H23" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32 25C32 21.8334 34.6667 20 37 20C39.3334 20 42 21.8334 42 25C42 30.7 32 34.9333 32 40H42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg> -->
			</span>
		</div>
		<!-- <div class="bar-item">
			<span @click="blodOperator" class="item-detail" style="font-size: 18px; font-weight: bold;">B</span>
		</div> -->
		<div class="bar-item">
			<span @click="updateTextAlign('left')"  class="item-detail">
				<!--左对齐-->
				<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.169 4.239h27.013v1.971h-27.013zM2.169 9.564h16.563v1.971h-16.563zM2.169 20.014h16.563v1.972h-16.563zM2.169 14.69h27.013v1.972h-27.013zM2.169 25.337h27.013v1.972h-27.013z"></path></g></svg>
			</span>
			<span @click="updateTextAlign('center')"  class="item-detail">
				<!--居中对齐-->
				<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.267 4.338h27.013v1.972h-27.013zM8.972 9.662h13.801v1.972h-13.801zM8.972 20.113h13.801v1.972h-13.801zM2.267 14.789h27.013v1.972h-27.013zM2.267 25.434h27.013v1.973h-27.013z"></path></g></svg>
			</span>
			<span @click="updateTextAlign('right')"  class="item-detail">
				<!--右对齐-->
				<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.366 4.239h27.013v1.971h-27.013zM12.815 9.564h16.563v1.971h-16.563zM12.815 20.014h16.563v1.972h-16.563zM2.366 14.69h27.013v1.972h-27.013zM2.366 25.337h27.013v1.972h-27.013z"></path></g></svg>
			</span>
		</div>
		<div class="bar-item">
			<span  class="item-detail">
				<!--改变字体大小-->
				<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M12.053 6.507h7.253v3.2h1.067v-4.267h-17.28v4.267h1.067v-3.2h6.827v18.987h-2.667v1.067h6.4v-1.067h-2.667zM18.133 16.107h10.347v1.067h-10.347zM18.133 20.8h10.347v1.067h-10.347zM18.133 25.493h10.347v1.067h-10.347z"></path></g></svg>
				<select v-model="fontSize" @change="fontSizeChange">
					<option value="10px">10px</option>
					<option value="14px">14px</option>
					<option value="16px">16px</option>
					<option value="20px">20px</option>
					<option value="24px">24px</option>
				</select>
			</span>
			<span  class="item-detail">
				<el-color-picker v-model="colorText" @change="colorChange"></el-color-picker>
			</span>
			<span @click="updateContentStyle('listChildren')"  class="item-detail">
				<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 32 32" width="20" height="20"><path :fill="contentType == 'listChildren' ? 'blue' : 'black'" d="M6.222 8.889c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778zM11.111 5.778h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM11.111 14.667h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM11.111 23.556h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM6.222 17.778c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778zM6.222 26.667c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778z"></path></svg>
			</span>
		</div>
		<div class="bar-item">
			<span @click="showMath()"  class="item-detail">
				<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 32 32" width="20" height="20"><path d="M27.392 3.648h-22.784c-1.44 0-2.592 1.184-2.592 2.624v19.456c0 1.44 1.152 2.624 2.592 2.624h22.784c1.446-0.007 2.617-1.178 2.624-2.623v-19.457c-0.007-1.446-1.178-2.617-2.623-2.624h-0.001zM27.392 25.728h-13.664c-0.263-0.733-0.951-1.247-1.76-1.248h-4.32c-0.8 0-1.504 0.512-1.76 1.248h-1.28v-19.456h22.784v19.456zM18.272 9.536c-0.256 0-0.448 0.032-0.64 0.064l-1.568 3.808-1.536-3.808c-0.224-0.032-0.48-0.064-0.704-0.064s-0.48 0.032-0.704 0.064l-0.256 6.624c0.192 0.032 0.384 0.064 0.608 0.064 0.16 0 0.352-0.032 0.576-0.064l0.128-4.576 1.248 3.2c0.096 0 0.16 0.032 0.256 0.032h0.512c0.096 0 0.16-0.032 0.256-0.032l1.344-3.136 0.16 4.512c0.224 0.032 0.416 0.064 0.64 0.064 0.192 0 0.416-0.032 0.672-0.064l-0.32-6.624c-0.224-0.032-0.448-0.064-0.672-0.064zM9.44 21.024v-0.928h1.024c0-0.096 0.032-0.192 0.032-0.288s-0.032-0.224-0.032-0.32h-1.024v-0.736h1.28c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-1.984v3.488h2.016c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-1.312zM11.776 20.128c-0.032 0.096-0.032 0.192-0.032 0.32 0 0.096 0 0.192 0.032 0.288h2.016c0.032-0.096 0.032-0.192 0.032-0.32 0-0.096 0-0.192-0.032-0.288h-2.016zM11.776 19.136c-0.032 0.096-0.032 0.192-0.032 0.32 0 0.096 0 0.192 0.032 0.288h2.016c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-2.016zM17.728 19.072c-0.16 0-0.32 0.032-0.448 0.128-0.093 0.087-0.177 0.181-0.252 0.282l-0.004 0.006c-0.128-0.288-0.352-0.416-0.768-0.416-0.064 0-0.16 0-0.224 0.032-0.096 0-0.16 0.032-0.192 0.096-0.064 0.032-0.128 0.064-0.16 0.128-0.032 0.032-0.064 0.096-0.096 0.128 0-0.032 0-0.032-0.032-0.064v-0.096l-0.032-0.096c0-0.032 0-0.064-0.032-0.096h-0.128c-0.032-0.032-0.096-0.032-0.128-0.032-0.064 0-0.128 0.032-0.16 0.032h-0.128v2.496c0.085 0.022 0.183 0.034 0.283 0.034 0.024 0 0.048-0.001 0.072-0.002l-0.003 0c0.096 0 0.224 0 0.32-0.032v-1.312c0-0.128 0.032-0.224 0.032-0.32 0.032-0.064 0.064-0.128 0.128-0.192 0.032-0.032 0.096-0.064 0.128-0.096 0.064 0 0.128-0.032 0.16-0.032 0.128 0 0.224 0.064 0.288 0.16 0.032 0.096 0.064 0.224 0.064 0.384v1.408c0.096 0.032 0.224 0.032 0.32 0.032 0.128 0 0.224 0 0.352-0.032v-1.344c0-0.128 0-0.224 0.032-0.288s0.064-0.16 0.128-0.192c0.032-0.032 0.064-0.064 0.128-0.096 0.064 0 0.096-0.032 0.16-0.032 0.128 0 0.224 0.064 0.256 0.16 0.064 0.096 0.064 0.224 0.064 0.384v1.408c0.128 0.032 0.256 0.032 0.352 0.032 0.128 0 0.224 0 0.352-0.032v-1.568c0-0.352-0.064-0.576-0.224-0.736-0.096-0.16-0.32-0.224-0.608-0.224zM21.216 21.024c-0.032 0.032-0.096 0.032-0.128 0.064-0.032 0-0.096 0-0.128 0.032h-0.256c-0.005 0-0.011 0-0.016 0-0.171 0-0.325-0.074-0.431-0.192l-0-0c-0.096-0.096-0.16-0.288-0.16-0.544s0.064-0.448 0.16-0.576c0.096-0.128 0.256-0.192 0.448-0.192 0.096 0 0.192 0 0.256 0.032 0.095 0.011 0.181 0.033 0.263 0.066l-0.007-0.002 0.096-0.288c0-0.096 0.032-0.16 0.032-0.224-0.055-0.034-0.12-0.057-0.19-0.064l-0.002-0c-0.064-0.032-0.128-0.032-0.16-0.064h-0.384c-0.192 0-0.352 0.032-0.512 0.096s-0.288 0.16-0.384 0.288c-0.108 0.112-0.187 0.253-0.223 0.41l-0.001 0.006c-0.064 0.16-0.064 0.32-0.064 0.512 0 0.16 0 0.352 0.064 0.512s0.128 0.288 0.224 0.416c0.096 0.096 0.224 0.192 0.384 0.256s0.352 0.096 0.544 0.096h0.352c0.096 0 0.256-0.064 0.384-0.096 0-0.128-0.032-0.224-0.064-0.32s-0.064-0.16-0.096-0.224zM22.72 19.648l0.16-0.192c0.064-0.064 0.096-0.128 0.16-0.192 0.032-0.064 0.096-0.128 0.128-0.192s0.032-0.128 0.064-0.192 0.032-0.128 0.032-0.192c0-0.096-0.032-0.192-0.064-0.256s-0.064-0.128-0.128-0.16-0.128-0.064-0.224-0.096c-0.064-0.032-0.16-0.032-0.256-0.032h-0.16c-0.032 0-0.096 0-0.128 0.032-0.032 0-0.064 0-0.096 0.032-0.064 0-0.096 0.032-0.128 0.032 0 0.064 0 0.128 0.032 0.16 0 0.064 0.032 0.128 0.064 0.16 0.032 0 0.032 0 0.064-0.032l0.096-0.032h0.192c0.096 0 0.192 0 0.224 0.064 0.064 0.032 0.096 0.096 0.096 0.16s0 0.096-0.032 0.16c-0.009 0.050-0.031 0.094-0.064 0.128l0-0c-0.032 0.064-0.096 0.128-0.128 0.192s-0.128 0.128-0.192 0.224l-0.416 0.544 0.032 0.032h1.28c0-0.064 0.032-0.128 0.032-0.192 0-0.032-0.032-0.096-0.032-0.16h-0.608z"></path></svg>
			</span>
			<el-popover
			    placement="bottom"
			    title=""
			    :width="600"
			    trigger="click"
			  >
			    <el-table :data="versionData">
					<el-table-column prop="version" label="版本">
						<template #default="scope">{{scope.row[versionLabel.version]}}</template>
					</el-table-column>
					<el-table-column prop="date" label="日期">
						<template #default="scope">{{scope.row[versionLabel.date]}}</template>
					</el-table-column>
					<el-table-column prop="" label="操作" width="100">
						<template #default="scope">
							<el-button type="text" @click="showVersion(scope.row[versionLabel.content])">比较</el-button>
						</template>
					</el-table-column>
				</el-table>
			    <template #reference>
			      <svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path fill="#fff" d="M6 8C6 7.44771 6.44772 7 7 7H41C41.5523 7 42 7.44772 42 8V34C42 34.5523 41.5523 35 41 35H7C6.44772 35 6 34.5523 6 34V8Z" stroke="#4E5969" stroke-width="4"></path><path d="M12 41H36" stroke="#4E5969" stroke-width="4"></path><path d="M22.2662 27.3531L15.9277 20.9638L22.317 14.6253" stroke="#4E5969" stroke-width="4"></path><path d="M16.2411 20.965L33.9986 21.0359" stroke="#4E5969" stroke-width="4"></path></svg>
			    </template>
			  </el-popover>
			<span @click="showFlow()"  class="item-detail">
				<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill="#fff" d="M19 32C11.268 32 5 25.732 5 18C5 10.268 11.268 4 19 4C26.732 4 33 10.268 33 18" stroke="#333" stroke-width="4" stroke-linejoin="round"></path><rect x="18" y="18" width="26" height="26" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></rect></svg>
			</span>
			<span @click="insertChinese"  class="item-detail">
				<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M42 42L39.7143 37M26 42L28.2857 37M28.2857 37L34 24L39.7143 37M28.2857 37H39.7143" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 6L17 9" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 11H28" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 16C10 16 11.7895 22.2609 16.2632 25.7391C20.7368 29.2174 28 32 28 32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 11C24 11 22.2105 19.2174 17.7368 23.7826C13.2632 28.3478 6 32 6 32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
			</span>
		</div>
		<div class="bar-item">
			<span class="item-detail" style="font-size: 18px; display: block-flex; width: ;" @click="showHelpWindow">help</span>
		</div>
	</div>
	<div :id="richId"
		placeholder = "请输入内容"
		:contenteditable="!readonly" 
		class="htao-edit" 
		@focus="initFocus" 
		@blur="blurSelect"
		@keydown="dealKeyEvent"
		@input="inputConent"
		@compositionStart="alert('hello')"
		:style="{'height': height}"
		@mouseup="dealElementType"
		@paste="dealCtrlVEvents($event)">
	</div>
	<div :id="richId + 'mathMenu'" class="context-menu">
		<div class="context-menu-item" @click="showMath">编辑公式</div>
	</div>
	<el-dialog v-model="mathVisible" title="数学公式编辑" width="800">
		<math-edit v-model="mathVisible" :submitFomart="insertMathFormat" :content="mathContent"></math-edit>
	</el-dialog>
	<el-dialog v-model="flowVisible" title="图形编辑" width="800">
		<div>
			<htao-flow :invokeMethod="dealDrawFlow" v-if="flowVisible"></htao-flow>
		</div>
	</el-dialog>
	<el-dialog v-model="compareVisible" title="版本比较" width="800">
		<div>
			<compare-version v-model="content" :oldVersion="oldVersion" :hidenWindow="closeVersion" v-if="compareVisible"></compare-version>
		</div>
	</el-dialog>
	<el-dialog v-model="isVisibleHelp" title="帮助文档" width="800" fullscreen>
		<p style="text-indent: 2em; text-align: left;">这个富文本编辑器是用来编辑一些复杂的数据信息，该富文本编辑器主要支持内容复杂粘贴，代码框的加入，标题1，标题2的设置，一旦设置，
		就是整行设置，还有文本图片的对齐方式，分别是左对齐、居中对齐和右对齐。可以设置字体的大小，这个设置可以设置正常内容的字体，列表的字体大小，其他的内容是不能设置
		其字体大小的。可以修改字体的颜色，正常内容、列表、代码和拼音文本可以改变其颜色。可以添加列表，可以编辑数学公式，可以画图和添加具有拼音的汉字。</p>
		<p style="text-indent: 2em; text-align: left;">如果在编辑完公式，点击确定的时候，在公式上面鼠标右键，可以弹出公式编辑菜单，只要点击编辑公式，就可以编辑相关的公式了，不用担心
		编辑错误之后重新编辑的问题。</p>
		<p style="text-indent: 2em; text-align: left;">其中的快捷键中，tab表示缩进2个字符，alt表示取消缩进2个字符。如果列表回车之后，如果对应的项没有内容的话，
		就会跳出列表，代码框页是同样的道理，当没有代码的内容进行回车之后，且是最好一行的话，就会跳出该代码编辑框中。下面是讲对应图标的作用：</p>
		<ul>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="64 64 896 896" width="20" height="20"><path d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 0 0 308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 0 0-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z" :fill="ctrlVType == 'ideaCode' ? 'blue' : 'black'"></path></svg>
					</span>
				</div>
				这个是创建代码框的图标。
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path :fill="contentType == 'title1' ? 'blue' : 'black'" d="M6 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M25 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 24H25" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M34.2261 24L39.0001 19.0166V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
					</span>
				</div>
				这个是改变内容为标题1
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path :fill="contentType == 'title2' ? 'blue' : 'black'" d="M6 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 8V40" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 24H23" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M32 25C32 21.8334 34.6667 20 37 20C39.3334 20 42 21.8334 42 25C42 30.7 32 34.9333 32 40H42" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
					</span>
				</div>
				这个是改变内容为标题2
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<!--左对齐-->
						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.169 4.239h27.013v1.971h-27.013zM2.169 9.564h16.563v1.971h-16.563zM2.169 20.014h16.563v1.972h-16.563zM2.169 14.69h27.013v1.972h-27.013zM2.169 25.337h27.013v1.972h-27.013z"></path></g></svg>
					</span>
				</div>
				这个是左对齐
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.267 4.338h27.013v1.972h-27.013zM8.972 9.662h13.801v1.972h-13.801zM8.972 20.113h13.801v1.972h-13.801zM2.267 14.789h27.013v1.972h-27.013zM2.267 25.434h27.013v1.973h-27.013z"></path></g></svg>
					</span>
				</div>
				这个是居中对齐
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M2.366 4.239h27.013v1.971h-27.013zM12.815 9.564h16.563v1.971h-16.563zM12.815 20.014h16.563v1.972h-16.563zM2.366 14.69h27.013v1.972h-27.013zM2.366 25.337h27.013v1.972h-27.013z"></path></g></svg>
					</span>
				</div>
				这个是右对齐
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="styles__StyledSVGIconPathComponent-sc-4n1c4t-0 hXuHCJ svg-icon-path-icon fill" viewBox="0 0 32 32" width="20" height="20"><defs></defs><g><path d="M12.053 6.507h7.253v3.2h1.067v-4.267h-17.28v4.267h1.067v-3.2h6.827v18.987h-2.667v1.067h6.4v-1.067h-2.667zM18.133 16.107h10.347v1.067h-10.347zM18.133 20.8h10.347v1.067h-10.347zM18.133 25.493h10.347v1.067h-10.347z"></path></g></svg>
					</span>
				</div>
				这个是改变字体大小
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<el-color-picker v-model="colorText"></el-color-picker>
					</span>
				</div>
				这个是改变字体颜色
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 32 32" width="20" height="20"><path :fill="contentType == 'listChildren' ? 'blue' : 'black'" d="M6.222 8.889c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778zM11.111 5.778h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM11.111 14.667h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM11.111 23.556h15.111c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-15.111c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333zM6.222 17.778c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778zM6.222 26.667c-0.982 0-1.778-0.796-1.778-1.778s0.796-1.778 1.778-1.778c0.982 0 1.778 0.796 1.778 1.778s-0.796 1.778-1.778 1.778z"></path></svg>
					</span>
				</div>
				这个是添加列表
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 32 32" width="20" height="20"><path d="M27.392 3.648h-22.784c-1.44 0-2.592 1.184-2.592 2.624v19.456c0 1.44 1.152 2.624 2.592 2.624h22.784c1.446-0.007 2.617-1.178 2.624-2.623v-19.457c-0.007-1.446-1.178-2.617-2.623-2.624h-0.001zM27.392 25.728h-13.664c-0.263-0.733-0.951-1.247-1.76-1.248h-4.32c-0.8 0-1.504 0.512-1.76 1.248h-1.28v-19.456h22.784v19.456zM18.272 9.536c-0.256 0-0.448 0.032-0.64 0.064l-1.568 3.808-1.536-3.808c-0.224-0.032-0.48-0.064-0.704-0.064s-0.48 0.032-0.704 0.064l-0.256 6.624c0.192 0.032 0.384 0.064 0.608 0.064 0.16 0 0.352-0.032 0.576-0.064l0.128-4.576 1.248 3.2c0.096 0 0.16 0.032 0.256 0.032h0.512c0.096 0 0.16-0.032 0.256-0.032l1.344-3.136 0.16 4.512c0.224 0.032 0.416 0.064 0.64 0.064 0.192 0 0.416-0.032 0.672-0.064l-0.32-6.624c-0.224-0.032-0.448-0.064-0.672-0.064zM9.44 21.024v-0.928h1.024c0-0.096 0.032-0.192 0.032-0.288s-0.032-0.224-0.032-0.32h-1.024v-0.736h1.28c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-1.984v3.488h2.016c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-1.312zM11.776 20.128c-0.032 0.096-0.032 0.192-0.032 0.32 0 0.096 0 0.192 0.032 0.288h2.016c0.032-0.096 0.032-0.192 0.032-0.32 0-0.096 0-0.192-0.032-0.288h-2.016zM11.776 19.136c-0.032 0.096-0.032 0.192-0.032 0.32 0 0.096 0 0.192 0.032 0.288h2.016c0.032-0.096 0.032-0.224 0.032-0.32s0-0.192-0.032-0.288h-2.016zM17.728 19.072c-0.16 0-0.32 0.032-0.448 0.128-0.093 0.087-0.177 0.181-0.252 0.282l-0.004 0.006c-0.128-0.288-0.352-0.416-0.768-0.416-0.064 0-0.16 0-0.224 0.032-0.096 0-0.16 0.032-0.192 0.096-0.064 0.032-0.128 0.064-0.16 0.128-0.032 0.032-0.064 0.096-0.096 0.128 0-0.032 0-0.032-0.032-0.064v-0.096l-0.032-0.096c0-0.032 0-0.064-0.032-0.096h-0.128c-0.032-0.032-0.096-0.032-0.128-0.032-0.064 0-0.128 0.032-0.16 0.032h-0.128v2.496c0.085 0.022 0.183 0.034 0.283 0.034 0.024 0 0.048-0.001 0.072-0.002l-0.003 0c0.096 0 0.224 0 0.32-0.032v-1.312c0-0.128 0.032-0.224 0.032-0.32 0.032-0.064 0.064-0.128 0.128-0.192 0.032-0.032 0.096-0.064 0.128-0.096 0.064 0 0.128-0.032 0.16-0.032 0.128 0 0.224 0.064 0.288 0.16 0.032 0.096 0.064 0.224 0.064 0.384v1.408c0.096 0.032 0.224 0.032 0.32 0.032 0.128 0 0.224 0 0.352-0.032v-1.344c0-0.128 0-0.224 0.032-0.288s0.064-0.16 0.128-0.192c0.032-0.032 0.064-0.064 0.128-0.096 0.064 0 0.096-0.032 0.16-0.032 0.128 0 0.224 0.064 0.256 0.16 0.064 0.096 0.064 0.224 0.064 0.384v1.408c0.128 0.032 0.256 0.032 0.352 0.032 0.128 0 0.224 0 0.352-0.032v-1.568c0-0.352-0.064-0.576-0.224-0.736-0.096-0.16-0.32-0.224-0.608-0.224zM21.216 21.024c-0.032 0.032-0.096 0.032-0.128 0.064-0.032 0-0.096 0-0.128 0.032h-0.256c-0.005 0-0.011 0-0.016 0-0.171 0-0.325-0.074-0.431-0.192l-0-0c-0.096-0.096-0.16-0.288-0.16-0.544s0.064-0.448 0.16-0.576c0.096-0.128 0.256-0.192 0.448-0.192 0.096 0 0.192 0 0.256 0.032 0.095 0.011 0.181 0.033 0.263 0.066l-0.007-0.002 0.096-0.288c0-0.096 0.032-0.16 0.032-0.224-0.055-0.034-0.12-0.057-0.19-0.064l-0.002-0c-0.064-0.032-0.128-0.032-0.16-0.064h-0.384c-0.192 0-0.352 0.032-0.512 0.096s-0.288 0.16-0.384 0.288c-0.108 0.112-0.187 0.253-0.223 0.41l-0.001 0.006c-0.064 0.16-0.064 0.32-0.064 0.512 0 0.16 0 0.352 0.064 0.512s0.128 0.288 0.224 0.416c0.096 0.096 0.224 0.192 0.384 0.256s0.352 0.096 0.544 0.096h0.352c0.096 0 0.256-0.064 0.384-0.096 0-0.128-0.032-0.224-0.064-0.32s-0.064-0.16-0.096-0.224zM22.72 19.648l0.16-0.192c0.064-0.064 0.096-0.128 0.16-0.192 0.032-0.064 0.096-0.128 0.128-0.192s0.032-0.128 0.064-0.192 0.032-0.128 0.032-0.192c0-0.096-0.032-0.192-0.064-0.256s-0.064-0.128-0.128-0.16-0.128-0.064-0.224-0.096c-0.064-0.032-0.16-0.032-0.256-0.032h-0.16c-0.032 0-0.096 0-0.128 0.032-0.032 0-0.064 0-0.096 0.032-0.064 0-0.096 0.032-0.128 0.032 0 0.064 0 0.128 0.032 0.16 0 0.064 0.032 0.128 0.064 0.16 0.032 0 0.032 0 0.064-0.032l0.096-0.032h0.192c0.096 0 0.192 0 0.224 0.064 0.064 0.032 0.096 0.096 0.096 0.16s0 0.096-0.032 0.16c-0.009 0.050-0.031 0.094-0.064 0.128l0-0c-0.032 0.064-0.096 0.128-0.128 0.192s-0.128 0.128-0.192 0.224l-0.416 0.544 0.032 0.032h1.28c0-0.064 0.032-0.128 0.032-0.192 0-0.032-0.032-0.096-0.032-0.16h-0.608z"></path></svg>
					</span>
				</div>
				这个是编辑数学公式
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><path fill="#fff" d="M6 8C6 7.44771 6.44772 7 7 7H41C41.5523 7 42 7.44772 42 8V34C42 34.5523 41.5523 35 41 35H7C6.44772 35 6 34.5523 6 34V8Z" stroke="#4E5969" stroke-width="4"></path><path d="M12 41H36" stroke="#4E5969" stroke-width="4"></path><path d="M22.2662 27.3531L15.9277 20.9638L22.317 14.6253" stroke="#4E5969" stroke-width="4"></path><path d="M16.2411 20.965L33.9986 21.0359" stroke="#4E5969" stroke-width="4"></path></svg>
					</span>
				</div>
				这个是版本对比，还在开发中，使用不了
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill="#fff" d="M19 32C11.268 32 5 25.732 5 18C5 10.268 11.268 4 19 4C26.732 4 33 10.268 33 18" stroke="#333" stroke-width="4" stroke-linejoin="round"></path><rect x="18" y="18" width="26" height="26" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"></rect></svg>
					</span>
				</div>
				这个是图片绘图
			</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">
				<div class="bar-item" style="width: 30px; height: 30px; float: left;">
					<span  class="item-detail">
						<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" viewBox="0 0 48 48" width="20" height="20"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path d="M42 42L39.7143 37M26 42L28.2857 37M28.2857 37L34 24L39.7143 37M28.2857 37H39.7143" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 6L17 9" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 11H28" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 16C10 16 11.7895 22.2609 16.2632 25.7391C20.7368 29.2174 28 32 28 32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path d="M24 11C24 11 22.2105 19.2174 17.7368 23.7826C13.2632 28.3478 6 32 6 32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
					</span>
				</div>
				这个是中文拼音编辑
			</li>
		</ul>
		<p style="text-indent: 2em; text-align: left; clear: both;">上面主要是讲解普通用户的使用，接下来是讲解开发人员使用该注解信息。其中包括支持的vue的版本
		props的属性信息，v-model的数据信息以及一些api，比如获取标题的文本内容等等信息。该组件是上传到npm官方库中，可以使用npm install htao-richtext来进行安装最
		新的版本，该富文本编辑器只支持vue3,不支持vue2的，因此在使用的时候，需要确定自己的vue版本，避免影响自己的使用。</p>
		<p style="text-indent: 2em; text-align: left;">使用npm install htao-richtext进行安装成功之后，需要在main.js的文件中，加载该组件的相关内容，如果没有
		设置，就会造成一些功能不能使用。如下就是在main.js中的设置内容：</p>
		<p style="text-indent: 2em; text-align: left;">import htaoRichText from 'htao-richtext/src/components/htao-richtext'</p>
		<p style="text-indent: 2em; text-align: left;">app.use(htaoRichText)</p>
		<p style="text-indent: 2em; text-align: left;">设置完成之后，就可以在需要使用的页面进行使用了，使用的时候不需要在加载组件，上面的代码中就已经将需要加载的
		组件，因此直接使用即可。简单的使用是：&lt;htao-rich v-model="richText"&gt;&lt;/htao-rich&gt;</p>
		<ul>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">height是设置高度，默认高度是300px</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">readOnly是否是只读，默认是false</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">isHeader是否有标题，默认是true</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">versionData各个版本的信息，默认是空数组</li>
			<li style="text-align: left; clear: both; display: flex; align-items: center;">versionLabel版本中各个字段的内容信息，content表示内容的标签，
			date表示版本数据的时间，version表示版本信息，id表示版本的唯一键</li>
		</ul>
	</el-dialog>
</template>

<script>
	import MathEdit from './module/MathEdit.vue'
	import $ from 'jquery'
	import eleData from './utils/RichElement.js'
	import eleOper from './utils/ElementOperator.js'
	import eleEven from './utils/ElementEvent.js'
	import richProps from './utils/props.js'
	import { v4 as uuidv4 } from 'uuid'
	import {ElDialog, ElPopover, ElTable, ElTableColumn, ElButton, ElColorPicker, ElTooltip} from 'element-plus'
	import 'element-plus/dist/index.css'
	import chineseWord from './utils/ChineseWord.js'
	export default {
		name: 'HtaoRich',
		title: 'htao-rich',
		order: 1,
		props: richProps,
		emits: ['update:modelValue'],
		components: {MathEdit, ElDialog, ElPopover, ElTable, ElTableColumn, ElButton, ElColorPicker, ElTooltip},
		watch: {
			modelValue: {
				handler(newValue, oldValue) {
					if (this.content != newValue) {
						this.content = newValue;
						if (!this.content) {
							this.content = '';
						}
					}
					if (!this.isInitContent || this.content == '') {
						setTimeout(() => {this.initElement();}, 500);
						if (!this.isInitContent) {
							this.isInitContent = true;
							setTimeout(() => {
								let imgs = document.getElementById(this.richId).querySelectorAll('img');
								for(let i = 0; i < imgs.length; i ++) {
									if ($(imgs[i]).attr('tag') == 'mathFormate') {
										imgs[i].addEventListener('contextmenu', (e) => {
											this.showMathContextMenu(e, imgs[i]);
										})
									}
								}
							}, 500);
						}
						
					}
					
				},
				immediate: true,
				deep: true
			},
		},
		data() {
			return {
				content: '',
				ctrlVType: 'common',
				contentType: '',
				tagEle: [],
				richId: uuidv4().replaceAll(/-/g, ''),
				mathVisible: false,
				selectRange: null,
				notice: '',
				flowVisible: false,
				isTypingPinyin: false,
				compareVisible: false,
				oldVersion: '<p>hello where</p>',
				fontSize: '',
				colorText: '',
				isInitContent: false,
				isVisibleHelp: false,
				compositionStart: () => {},
				compositionEnd: () => {},
				mathContent: '',
				menuSelectEle: null
			}
		},
		methods: {
			showMathContextMenu(e, ele) {
				this.menuSelectEle = e.currentTarget;
				this.mathContent = $(e.currentTarget).attr('format');
				console.log(this.mathContent)
				$("#" + this.richId + 'mathMenu').css({'display': 'block', 'left': e.pageX + 'px', 'top': e.pageY + 'px'});
				e.preventDefault();
				e.stopPropagation();
			},
			hideContextMenu() {
				$("#" + this.richId + 'mathMenu').css({'display': 'none'});
				this.menuSelectEle = null;
				this.mathContent = '';
			},
			showHelpWindow() {
				this.isVisibleHelp = true;
			},
			dealElementType() {
				this.hideContextMenu();
				setTimeout(() => {this.dealElementAttr()}, 0)
			},
			dealElementAttr() {
				let element = eleOper.getSelectNode();
				let fontSize = '';
				let colorText = '';
				let fs = $(element).css("font-size");
				if (fs == undefined || fs == null || fs == '') {
					fontSize = '';
				} else {
					fontSize = fs;
				}
				let ct = $(element).css("color");
				if (ct == undefined || ct == null || ct == '') {
					colorText = '';
				} else {
					colorText = ct;
				}
				this.fontSize = fontSize;
				this.colorText = colorText;
			},
			editSelectionChange(e) {
				let elements = eleOper.getElements(window.getSelection());
				console.log(elements);
			},
			createCodeArea() {
				// this.selectRange = window.getSelection().getRangeAt(0);
				let node = eleOper.getSelectedNode(this.selectRange);
				this.createCodeDgui(node);
			},
			createCodeDgui(node) {
				let div = "div";
				let tagName = $(node).prop('tagName');
				if (tagName.toLowerCase() == div) {
					let n = eleOper.createElement(node, eleData.code, true);
					$(n).empty();
					this.createCodeContent(n);
					return;
				}
				let id = $(node).attr('tag');
				if (id == eleData.header.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.title1.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.title2.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.content.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.image.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.listOrder.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.code.id) {
					this.createCodeWindow(node);
				} else if (id == eleData.chineseWord.id) {
					this.createCodeWindow(node);
				} else {
					this.createCodeWindow($(node).parent()[0]);
				}
			},
			createCodeWindow(node) {
				let n = eleOper.createElementNoParent(eleData.code);
				$(n).empty();
				$(node).after(n);
				this.createCodeContent(n);
			},
			createCodeContent(n) {
				let title = $("<span style='border-bottom: 1px solid gray;display: inline-block; width: 100%;font-size: 14px; text-align: right;' tag='title'><br/></span>");
				$(n).append(title);
				let body = $("<span style='display: inline-block; width: 100%;font-size: 14px;' tag='body'></span>");
				$(n).append(body);
				let code = $(eleData.code.childrenTag);
				$(body).append(code);
			},
			showMath() {
				console.log(this.mathContent)
				$("#" + this.richId + 'mathMenu').css({'display': 'none'});
				this.mathVisible = true;
			},
			showFlow() {
				this.flowVisible = true;
			},
			showVersion(oldContent) {
				this.content = document.getElementById(this.richId).innerHTML;
				this.oldVersion = oldContent;
				this.compareVisible = true;
			},
			closeVersion() {
				this.compareVisible = false;
			},
			inputConent(e) {
				if (this.isTypingPinyin) return;
				let node = eleOper.getSelectNode();
				chineseWord.insertCon();
				// console.log(node);
				e.stopPropagation();
				e.preventDefault();
			},
			insertChinese() {
				// let node = eleOper.getSelectNode();
				let node = this.tagEle[0];
				let tag = $(node).attr('tag');
				if (tag == eleData.chineseWord.contentId || tag == eleData.chineseWord.pingyinId) {
					node = $(node).parent().parent();
				}
				chineseWord.insertNode(node, false);
			},
			bindInputValueEvent(obj) {
				let _this = this;
				_this.$emit('update:modelValue', $('#' + this.richId).html())
				// console.log(this.getTitle());
				this.title(this.getTitle());
			},
			getTitle() {
				let no = $("#" + this.richId).children()[0];
				if ($(no).attr("tag") == eleData.header.id) {
					return $(no).text();
				}
				return '';
			},
			selectPasteType(event, type) {
				this.ctrlVType = type;
			},
			blurSelect () {
				this.selectRange = window.getSelection().getRangeAt(0);
				this.tagEle = eleOper.getElements(this.selectRange);
				this.bindInputValueEvent(null);
			},
			blodOperator() {
				if (this.tagEle.length != 1) {
					return;
				}
				
			},
			insertMathFormat(svg, formate, imgBase64) {
				if (this.menuSelectEle == null) {
					let fragment = this.selectRange.createContextualFragment(`<img tag="mathFormate" format="${formate}" style="max-height: 100%; max-width: 100%; display: inline;" src=${imgBase64} />`);
					// $(fragment.lastChild).click(function() {alert('math')})
					fragment.lastChild.addEventListener('contextmenu', (e) => {
						this.showMathContextMenu(e, fragment.lastChild);
					})
					this.selectRange.insertNode(fragment.lastChild);
					let _this = this;
					_this.$emit('update:modelValue', $('#' + this.richId).html())
				} else {
					$(this.menuSelectEle).attr('format', formate);
					$(this.menuSelectEle).attr('src', imgBase64);
				}
				this.hideContextMenu();
			},
			colorChange(e) {
				let elements = eleOper.getElements(this.selectRange);
				for(let i = 0; i < elements.length; i++) {
					let item = elements[i];
					$(item).css({'color': e});
				}
			},
			fontSizeChange(e) {
				let elements = eleOper.getElements(this.selectRange);
				for(let i = 0; i < elements.length; i++) {
					let item = elements[i];
					let tag = $(item).attr('tag');
					if (tag == eleData.content.id || tag == eleData.title1.id || tag == eleData.title2.id) {
						$(item).css({'font-size': this.fontSize});
						continue;
					} else if (tag == eleData.listOrder.id) {
						let lis = $(item).children();
						for(let j = 0; j < lis.length; j++) {
							$(lis[j]).css({'font-size': this.fontSize})
						}
					} else if (tag == eleData.listOrder.liId) {
						$(item).css({'font-size': this.fontSize});
					}
				}
				let _this = this;
				this.fontSize = '';
				_this.$emit('update:modelValue', $('#' + this.richId).html())
			},
			updateTextAlign(direction) {
				let elements = eleOper.getElements(this.selectRange);
				let flexDirect = 'flex-start';
				if (direction == 'center') {
					flexDirect = 'center';
				} else if (direction == 'right') {
					flexDirect = 'flex-end';
				}
				for(let i = 0; i < elements.length; i++) {
					let item = elements[i];
					if ($(item).attr('tag') == eleData.title1.id) {
						$(item).css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
					if ($(item).attr('tag') == eleData.title2.id) {
						$(item).css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
					if ($(item).attr('tag') == eleData.content.id) {
						$(item).css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
					if ($(item).attr('tag') == eleData.chineseWord.id) {
						$(item).css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
					if ($(item).attr('tag') == eleData.chineseWord.wordId) {
						$(item).parent().css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
					if ($(item).attr('tag') == eleData.chineseWord.pingyinId || $(item).attr('tag') == eleData.chineseWord.contentId) {
						$(item).parent().parent().css({'text-align': direction, 'justify-content': flexDirect});
						continue;
					}
				}
				let _this = this;
				_this.$emit('update:modelValue', $('#' + this.richId).html())
			},
			updateContentStyle(type) {
				this.contentType = type;
				let ele = null;
				if (type == eleData.title1.id) {
					ele = eleData.title1;
				} else if (type ==  eleData.title2.id) {
					ele = eleData.title2;
				} else if (type == 'listChildren') {
					ele = eleData.listOrder;
				} else if (type == eleData.content.id) {
					ele = eleData.content;
				}
				if (type == eleData.title1.id || type == eleData.title2.id || type == eleData.content.id) {
					for (let i = 0; i < this.tagEle.length; i ++) {
						let t = $(this.tagEle[i]).attr("tag");
						if (t == eleData.content.id || t == eleData.title1.id || t == eleData.title2.id) {
							eleOper.updateElementStyle(this.tagEle[i], ele);
							let indent = $(this.tagEle[i]).attr("indent");
							if (indent == null || indent == undefined || indent == '') {
								indent = 0;
							} else {
								indent = parseInt(indent);
							}
							$(this.tagEle[i]).css({"text-indent": indent + "em"});
							$(this.tagEle[i]).attr("indent", indent);
						}
					}
				} else if (type == 'listChildren') {
					// 这里进行转换列表信息，就是进行添加列表信息
					if (this.tagEle.length == 1) {
						if ($(this.tagEle[0]).attr("tag") != eleData.content.id) return;
						eleOper.insertOlWdinwo(eleData.listOrder, '', this.tagEle[0]);
						$("#" + this.richId).focus();
						return;
					}
					for (let i = 0; i < this.tagEle.length; i ++) {
						let t = $(this.tagEle[i]).attr("tag");
						if (t != eleData.content.id) return;
					}
					for (var i = 0; i < this.tagEle.length; i++) {
						let t  = this.tagEle[i];
						if (i == 0) {
							eleOper.insertOlWdinwo(eleData.listOrder, $(t).text(), t);
							$("#" + this.richId).focus();
						} else {
							eleOper.insertCode(eleData.listOrder, $(t).text());
						}
						$(t).remove();
					}
				}
				let _this = this;
				_this.$emit('update:modelValue', $('#' + this.richId).html())
			},
			initElement() {
				$("#" + this.richId).html("")
				if (this.content == '' || this.content == null || this.content == undefined) {
					if (this.isHeader) {
						eleOper.createElement($("#" + this.richId), eleData.header);
					} else {
						eleOper.createElement($("#" + this.richId), eleData.content);
					}
				} else {
					$("#" + this.richId).html(this.content);
				}
				$("#" + this.richId).focus();
			},
			initFocus () {},
			dealKeyEvent(e) {
				if (e.key == 'Backspace' || e.key == 'backspace') {
					eleEven.backspace("#" + this.richId, e)
				} else if (e.key == 'Enter' || e.key == "enter") {
					eleEven.enter("#" + this.richId, e);
				} else if (e.key == 'Tab' || e.key == 'tab') {
					eleEven.tab(e);
				} else if (e.key == 'Alt' || e.key == 'alt') {
					eleEven.alt(e);
				}
			},
			dealCtrlVEvents(event) {
				eleEven.ctrlV(event, this.ctrlVType);
				event.stopPropagation();
				event.preventDefault();
			},
			dealDrawFlow(json, svg, imgbase64, isCancel) {
				if (isCancel) {
					this.flowVisible = false;
					return;
				}
				eleOper.range = this.selectRange;
				let node = eleOper.insertNode(imgbase64, eleData.image, true);
				$(node).attr("datas", JSON.stringify(json));
				$(node).attr("type", "drawImg");
				// $(node).click(function(){alert('hello')})
				eleOper.range = null;
				this.flowVisible = false;
				let _this = this;
				_this.$emit('update:modelValue', $('#' + this.richId).html())
			}
		},
		mounted() {
			let _this = this;
			// this.initElement();
			this.compositionStart = () => {
				_this.isTypingPinyin = true;
			}
			this.compositionEnd = (e) => {
				//在compositionend事件触发时，即在拼音输入结束时，我们把isTypingPinyin设置为false。
				_this.isTypingPinyin = false;
				_this.inputConent(e);
			}
			document.getElementById(this.richId).addEventListener('compositionstart', this.compositionStart);
			
			document.getElementById(this.richId).addEventListener('compositionend', this.compositionEnd);
		},
		unmounted() {
			// document.getElementById(this.richId).removeEventListener('compositionstart', this.compositionStart)
			// document.getElementById(this.richId).removeEventListener('compositionend', this.compositionEnd)
		}
	}
</script>

<style scoped>
	.context-menu {
		display: none;
		position: absolute;
		background-color: #fff;
		border: 1px solid #ccc;
		min-width: 100px;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
		z-index: 10001;
	}
	.context-menu-item {
		padding: 5px 10px;
		cursor: pointer;
	}
	.context-menu-item:hover {
		background-color: #e6f7ff;
	}
	.htao-edit {
		text-align: left;
		box-shadow: 3px 3px 3px #00000014,
					 3px -3px 3px #00000014,
					 -3px 3px 3px #00000014,
					 -3px -3px 3px #00000014;
		padding: 20px;
		min-height: 300px;
		overflow-y: auto;
	}
	.htao-bar, .bar-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		line-height: normal;
		flex-wrap: wrap;
	}
	.bar-item {
		/* border: 1px dotted gray; */
		margin-right: 10px;
		margin-bottom: 5px;
	}
	.item-detail {
		display: flex; 
		flex-direction: row; 
		justify-content: center; 
		align-items: center; 
		height: 30px; 
		margin: 5px;
	}
	.bar-item span {
		cursor: pointer;
	}
	.edit-status {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 3px;
	}
	::v-deep .chinese-world {
		border: 1px solid rgba(0, 0, 0, 0.4);
	}
	::v-deep .el-only-child__content {
		height: 20px !important;
	}
	::v-deep .el-color-picker__trigger {
		padding: 0;
		width: 22px;
		height: 22px;
	}
</style>